<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- header -->
    <%@ include file="/WEB-INF/views/include/header.jsp"%>
</head>
<body class="login-layout blur-login">
<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="login-container">
                    <div class="center">
                        <h1>
                            <i class="ace-icon fa fa-leaf green"></i>
                            <span class="red">永泰县</span>
                            <span class="white" id="id-text2">督查管理系统</span>
                        </h1>
                        <h4 class="blue" id="id-company-text">&copy; 政信云</h4>
                    </div>
                    <div class="space-6"></div>

                    <div class="position-relative">
                        <div id="login-box" class="login-box visible widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header blue lighter bigger">
                                        <c:if test="${login}">
                                            <i class="ace-icon fa fa-coffee green"></i>
                                            初次登录，请修改初始密码。
                                        </c:if>
                                        <c:if test="${empty user.mobile}">
                                            <i class="ace-icon fa fa-coffee green"></i>
                                            为便于系统发送提醒短信，请完善个人信息。
                                        </c:if>
                                    </h4>
                                    <div class="space-6"></div>
                                    <form id="form" method="post"  onsubmit="return false;" enctype="multipart/form-data">
                                        <fieldset>
                                            <c:if test="${login}">
                                                <label class="block clearfix">
														<span class="block input-icon input-icon-right">
                                                            <span>请设置新密码：</span>
                                                            <input type="password" class="form-control" onkeyup="validate1()" id="pwd1" required placeholder="请输入新密码" />
														</span>
                                                </label>

                                                <label class="block clearfix">
														<span class="block input-icon input-icon-right">
                                                            <span>再次输入新密码：</span>
															<input type="password" name="password" class="form-control" onkeyup="validate()" id="pwd2" required placeholder="请再次输入密码" />
														</span>
                                                </label>
                                                <%--<input type="hidden" name="password" value="">--%>
                                            </c:if>
                                            <c:if test="${empty user.mobile}">
                                                <label class="block clearfix">
														<span class="block input-icon input-icon-right">
                                                            <span>请输入手机号码：</span>
															<input type="text" name="mobile" class="form-control" onkeyup="checkPhone()" id="mobile" required placeholder="请输入手机号码" />
														</span>
                                                </label>
                                            </c:if>
                                            <div id="tishi"><span font class='text-danger'>以字母开头，长度在6~18之间，只能包含字母、数字和下划线</span></div>
                                            <div id="tishi2"></div>
                                        </fieldset>
                                        <div class="text-right">
                                            <input type="button"  id="submit" class="btn-sm" value="确认">
                                            <input type="button" class="logout btn-sm btn-info" onclick="window.location.href='/logout'" value="切换账号">
                                        </div>
                                    </form>
                                </div><!-- /.widget-main -->
                            </div><!-- /.widget-body -->
                        </div><!-- /.login-box -->
                    </div><!-- /.position-relative -->
                    <h4 class="redTips text-danger">温馨提示：您已登录系统,如不需要更改密码、手机号请退出登录,避免无法正常登入</h4>

                    <%--<div class="navbar-fixed-top align-right">--%>
                        <%--<br />--%>
                        <%--<a>主题切换：</a>--%>
                        <%--&nbsp;--%>
                        <%--<a id="btn-login-dark" href="#">黑色</a>--%>
                        <%--&nbsp;--%>
                        <%--<span class="blue">/</span>--%>
                        <%--&nbsp;--%>
                        <%--<a id="btn-login-blur" href="#">蓝色</a>--%>
                        <%--&nbsp;--%>
                        <%--<span class="blue">/</span>--%>
                        <%--&nbsp;--%>
                        <%--<a id="btn-login-light" href="#">白色</a>--%>
                        <%--&nbsp; &nbsp; &nbsp;--%>
                    <%--</div>--%>
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.main-content -->
</div><!-- /.main-container -->

<!-- basic scripts -->



<!--[if !IE]> -->
<script type="text/javascript">
    window.jQuery || document.write("<script src='<s:url value="/assets/js/jquery.js"></s:url>'>"+"<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='<s:url value="/assets/js/jquery1x.js"></s:url>'>"+"<"+""/script>");
</script>
<![endif]-->
<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='<s:url value="/assets/js/jquery.mobile.custom.js"></s:url>'>"+"<"+"/script>");
</script>

<!-- inline scripts related to this page -->
<script type="text/javascript">

    jQuery(function($) {
        $(document).on('click', '.toolbar a[data-target]', function(e) {
            e.preventDefault();
            var target = $(this).data('target');
            $('.widget-box.visible').removeClass('visible');//hide others
            $(target).addClass('visible');//show target
        });
    });

    //you don't need this, just used for changing background
    jQuery(function($) {
        $('#btn-login-dark').on('click', function(e) {
            $('body').attr('class', 'login-layout');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-light').on('click', function(e) {
            $('body').attr('class', 'login-layout light-login');
            $('#id-text2').attr('class', 'grey');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-blur').on('click', function(e) {
            $('body').attr('class', 'login-layout blur-login');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'light-blue');

            e.preventDefault();
        });

    });

    $("#validImage").click(function() {
        getImage();
    });

    $(window).resize(function(){
        getImage();
    });

    $("#loginBtn").click(function(){
        $("#form").submit();
    });

    getImage();

    function getImage() {
        var date = new Date().getMilliseconds();
        var validImageWidth = $("#validDiv").width();
        $("#validImage").attr("src", '<s:url value="/validateCodeServlet"></s:url>?height=40&width=' + validImageWidth + '&' + date);
    }

    $("#validateCode").bind('keyup', function(event) {
        var keyCode = event.keyCode;
        if(keyCode == 13) {
            $("#form").submit();
        }
    });

    $("#emailBtn").click(function() {
        var email = $("#email").val();
        var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
        if(reg.test(email)) {
            $.post("<s:url value="/api/sys/user/searchPassword"/>", { email: email},
                function(data){
                    if(data.code == "200") {
                        $("#email_msg").text('重置密码的邮件已经发到您的邮箱“'+ email +'”中，请查收');
                    } else {
                        $("#email_msg").text(data.message);
                    }
                });
        } else {
            $("#email_msg").text('请输入正确的邮箱格式');
        }
    });

    $(function () {
        $("#submit").attr("disabled",true).css("background-color","#eee");
        document.getElementById("pwd2").disabled = true;
    })

    // 密码正则
    function isPassword(str) {
        document.getElementById("submit").disabled = true;
        // 以字母开头，长度在6~18之间，只能包含字母、数字和下划线
        var reg = /^[a-zA-Z]\w{5,17}$/;
        if (!reg.test(str)) {
            document.getElementById("tishi").innerHTML="<span font class='text-danger'>以字母开头，长度在6~18之间，只能包含字母、数字和下划线</span>";
            document.getElementById("pwd2").disabled = true;
        }else {
            document.getElementById("pwd2").disabled = false;
        };

    };
    function validate1() {
        var pwd1 = document.getElementById("pwd1").value;
        isPassword(pwd1);
        if(!$("#pwd2").prop("disabled")){
            validate();
        }
    }



    /*两次密码是否一样*/
    function validate() {
        var pwd1 = document.getElementById("pwd1").value;
        var pwd2 = document.getElementById("pwd2").value;
        isPassword();
        <!-- 对比两次输入的密码 -->
        if(pwd1 == pwd2) {
            document.getElementById("tishi").innerHTML="<span font class='text-success'>两次密码相同</span>";
            document.getElementById("submit").disabled = false;
            $("#submit").css({"background":"#6fb3e0","border-color":"#6fb3e0","color":"#fff"})
        }
        else {
            $("#tishi").html("<span font class='text-danger'>两次密码不相同</span>");
            $("#submit").css({"background":"#eeeeee","border-color":"#d5d5d5","color":"#848484" })
        }
    }
    function checkPhone() {
        var phone = document.getElementById('mobile').value;
        document.getElementById("submit").disabled = true;
        if((!(/^1[3456789]\d{9}$/.test(phone)) && phone.length >= 11)||phone.length<11){
            document.getElementById("tishi2").innerHTML="<span font class='text-danger'>手机号码有误，请重填</span>";
            document.getElementById("submit").disabled = true;
            $("#submit").css({"background":"#eeeeee","border-color":"#d5d5d5","color":"#848484" })
        }else if (phone.length == 11) {
            document.getElementById("tishi2").innerHTML="<span font class='text-danger'>手机格式合格</span>";
            document.getElementById("submit").disabled = false;
            $("#submit").css({"background":"#6fb3e0","border-color":"#6fb3e0","color":"#fff"})
        }
    }
    $("#submit").click(function () {
        var userData = $("#form").serialize();
        $.post("/modules/sys/user/updateMust/",userData,function (data) {
            if (data.code==200){
                alert("修改成功")
                setTimeout(function () {
                    open(location, '_self').close();
                    // window.location.href = "/logout"
                },1000)
            }else if (data.code == 500){
                alert(data.message);
            }
        })
    })
    //  鼠标禁止   cursor: no-drop
</script>
</body>
</html>